<script setup lang='ts'>
import { ref } from 'vue';
import { ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import { reg } from "../../../api/api";
const router = useRouter()
const data = useRoute()
const { mail, password } = data.query
const input = ref<string>('')
const getData = ref()
const sendCode = async () => {
    if (input.value.length < 6) return open4('错误', '请输入6位数验证码', 'error')
    getData.value = { mail, password, code: input.value }
    const res = await reg(getData.value)
    if(res.data.code !== '200') return open4('错误', res.data.msg, 'error')
    open4('成功', '注册成功', 'success')
    router.push({ name: 'goHome', query: { num: 3 } })
}
const open4 = (title: string, message: string, type: any) => {
    ElNotification({
        title,
        message,
        type,
    })
}
</script>

<template>
    <div class="content1">
        <el-divider content-position="left">
            <div class="mail">
                <el-icon size="22">
                    <Message />
                </el-icon>
                <p>请输入验证码</p>
            </div>
        </el-divider>
        <div class="mailData">
            <el-icon size="40" color="green"><Select /></el-icon>
            <h2>邮件已发送到邮箱{{ mail }}</h2>
        </div>
        <span class="size">请登录邮箱，查看并输入收到的验证码</span>
        <div class="mailCode">
            验证码：<el-input v-model="input" style="width: 250px;" placeholder="请输入验证码" maxlength="6" /><el-button
                @click="sendCode">提交</el-button>
        </div>
    </div>
</template>

<style scoped>
.content1 {
    width: 800px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px;
}

.mail {
    width: 120px;
    display: flex;
    justify-content: center;
}

.mailData {
    display: flex;
    align-items: center;
}

.size {
    color: #999;
    font-size: 12px;
}

.mailCode {
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>